<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <base href="/oa1/" />
    <title>名片类型列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
    <style>
        .thead-blue {
            color: #fff;
            font-weight: bold;
            background-color: #337ab7;
        }
        .panel {
            margin: 20px;
        }
    </style>
    <script src="static/jquery/jquery-1.10.2.min.js"></script>
    <script src="static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 搜索区域 -->
<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">名片类型搜索</h4>
    </div>
    <div class="panel-body">
        <form action="mp/cardtype/listMpCardtype" id="searchForm" method="post" class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-md-12">
                    <label for="type" class="col-md-2 control-label">类型名称</label>
                    <div class="col-md-4">
                        <!-- 分页参数隐藏域 -->
                        <input type="hidden" name="page" id="page" value="${pageInfo.current}">
                        <input type="hidden" name="pageSize" id="pageSize" value="${pageInfo.size}">
                        <!-- 搜索输入框（回显搜索关键词） -->
                        <input type="text" class="form-control" id="type" name="type" value="${searchType}" placeholder="请输入类型名称">
                    </div>
                    <div class="col-md-6">
                        <button type="button" onclick="searchBtn()" class="btn btn-success">搜索</button>
                        <a href="mp/cardtype/toAddMpCardtype" class="btn btn-info">添加类型</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 列表区域 -->
<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">名片类型列表</h4>
    </div>
    <table class="table table-bordered table-hover">
        <thead>
        <tr class="thead-blue" align="center">
            <td>编号</td>
            <td>类型名称</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <!-- 遍历分页数据 -->
        <c:forEach items="${pageInfo.records}" var="cardtype">
            <tr align="center">
                <td>${cardtype.oid}</td>
                <td>${cardtype.type}</td>
                <td>
                    <a href="mp/cardtype/toUpdateMpCardtype?oid=${cardtype.oid}" class="btn btn-warning btn-xs">修改</a>
                    <button type="button" onclick="setDeleteId(${cardtype.oid})"
                            class="btn btn-danger btn-xs"
                            data-toggle="modal" data-target="#confirmModal">删除</button>
                </td>
            </tr>
        </c:forEach>
        <!-- 无数据时显示 -->
        <c:if test="${pageInfo.total == 0}">
            <tr align="center">
                <td colspan="3">暂无数据</td>
            </tr>
        </c:if>
        </tbody>
    </table>
</div>

<!-- 分页区域 -->
<div class="col-md-12 text-center">
    <nav>
        <ul class="pagination">
            <!-- 首页 -->
            <li <c:if test="${pageInfo.current == 1}">class="disabled"</c:if>>
                <a href="javascript:gotoPage(1, ${pageInfo.size})" aria-label="First">
                    <span aria-hidden="true">首页</span>
                </a>
            </li>

            <!-- 上一页 -->
            <li <c:if test="${pageInfo.current == 1}">class="disabled"</c:if>>
                <a href="javascript:gotoPage(${pageInfo.current - 1}${pageInfo.size})" aria-label="Previous">
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>

            <!-- 页码信息 -->
            <li class="disabled">
                <a>第${pageInfo.current}/${pageInfo.pages}页 共${pageInfo.total}条</a>
            </li>

            <!-- 下一页 -->
            <li <c:if test="${pageInfo.current == pageInfo.pages}">class="disabled"</c:if>>
                <a href="javascript:gotoPage(${pageInfo.current + 1}${pageInfo.size})" aria-label="Next">
                    <span aria-hidden="true">下一页</span>
                </a>
            </li>

            <!-- 尾页 -->
            <li <c:if test="${pageInfo.current == pageInfo.pages}">class="disabled"</c:if>>
                <a href="javascript:gotoPage(${pageInfo.pages}${pageInfo.size})" aria-label="Last">
                    <span aria-hidden="true">尾页</span>
                </a>
            </li>

            <!-- 每页条数选择 -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    每页${pageInfo.size}条 <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:gotoPage(1,5)">5条/页</a></li>
                    <li><a href="javascript:gotoPage(1,10)">10条/页</a></li>
                    <li><a href="javascript:gotoPage(1,15)">15条/页</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">确认删除</h4>
            </div>
            <div class="modal-body">
                确定要删除该类型吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" onclick="doDelete()">确认删除</button>
            </div>
        </div>
    </div>
</div>

<!-- 操作结果提示模态框 -->
<div class="modal fade" id="resultModal" tabindex="-1" role="dialog" aria-labelledby="resultLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="resultLabel">操作结果</h4>
            </div>
            <div class="modal-body" id="resultContent">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="window.location.reload()">确定</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 存储待删除的ID
    var deleteId = null;

    // 设置删除ID
    function setDeleteId(oid) {
        deleteId = oid;
    }

    // 执行删除
    function doDelete() {
        if (deleteId == null) return;

        $.post("mp/cardtype/deleteMpCardtype", {"oid": deleteId}, function(result) {
            if (result) {
                $("#resultContent").text("删除成功！");
            } else {
                $("#resultContent").text("删除失败，请重试！");
            }
            $("#confirmModal").modal('hide');
            $("#resultModal").modal('show');
        });
    }

    // 分页跳转
    function gotoPage(page, pageSize) {
        $("#page").val(page);
        $("#pageSize").val(pageSize);
        $("#searchForm").submit();
    }

    // 搜索提交
    function searchBtn() {
        $("#page").val(1); // 搜索时重置为第一页
        $("#searchForm").submit();
    }
</script>
</body>
</html>